<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>发现</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/layui.demo.css">
    <style type="text/css">
        .layui-find-list li img {
            position: absolute;
            left: 15px;
            top: 8px;
            width: 36px;
            height: 36px;
            border-radius: 100%;
        }

        .layui-find-list li {
            position: relative;
            height: 90px;;
            padding: 5px 15px 5px 60px;
            font-size: 0;
            cursor: pointer;
        }

        .layui-find-list li * {
            display: inline-block;
            vertical-align: top;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .layui-find-list li span {
            margin-top: 4px;
            max-width: 155px;
        }

        .layui-find-list li p {
            display: block;
            line-height: 18px;
            font-size: 12px;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .back {
            cursor: pointer;
        }

        .lay_page {
            position: fixed;
            bottom: 0;
            margin-left: -15px;
            margin-bottom: 20px;
            background: #fff;
            width: 100%;
        }

        .layui-laypage {
            width: 105px;
            margin: 0 auto;
            display: block
        }
    </style>
    <script src="../static/layui/layui.js"></script>
    <script>
        layui.use(['layim', 'laypage', 'form',], function (socket) {
            var layim = layui.layim
                , layer = layui.layer
                , laytpl = layui.laytpl
                , form = layui.form
                , $ = layui.jquery
                , laypage = layui.laypage;
            var cache = parent.layui.layim.cache();
            var url = {}  //获得URL参数。

            $(function () {
                getRecommend();
            });

            function getRecommend() {
                $.get(url, {type: 'get'}, function (res) {
                    var data = eval('(' + res + ')');
                    var html = laytpl(LAY_tpl.value).render({
                        data: data.data,
                        legend: '推荐好友',
                        type: 'friend'
                    });
                    $('#LAY_view').html(html);
                });
            }

            $('body').on('click', '.add', function () {//添加好友
                var othis = $(this), type = othis.data('type');
                parent.layui.im.addFriendGroup(othis, type);
                // type == 'friend' ? parent.layui.im.addFriend(othis,type) : parent.layui.im.addGroup(othis);
            });
            $('body').on('click', '.createGroup', function () {//创建群
                var index = layer.open({
                    type: 2
                    , title: '创建群'
                    , shade: false
                    , maxmin: false
                    , area: ['550px', '400px']
                    , skin: 'layui-box layui-layer-border'
                    , resize: false
                    , content: cachedata.base.createGroup
                });
            });
            $('body').on('click', '.back', function () {//返回推荐好友
                getRecommend();
                $("#LAY_page").css("display", "none");
            });

            $("body").keydown(function (event) {
                if (event.keyCode == 13) {
                    $(".find").click();
                }
            });
        });
    </script>
</head>
<body>
<div class="layui-form">
    <div class="layui-container" style="padding:0">
        <div class="layui-row layui-col-space3">
            <div class="layui-col-xs7 mt15">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入账号/昵称/手机号/邮箱"
                       class="layui-input">
            </div>
            <div class="layui-col-xs1 mt15">
                <button class="layui-btn btncolor find">查找</button>
            </div>

            <div class="layui-col-xs3 mt15">
                <input type="radio" name="add" value="friend" title="找人" checked="">
                <input type="radio" name="add" value="group" title="找群">
                <button class="layui-btn layui-btn-xs btncolor createGroup">我要建群</button>
            </div>
        </div>
        <div id="LAY_view"></div>
        <div class="lay_page" id="LAY_page"></div>
    </div>
</div>
</body>
</html>
